<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue3响应式原理</title>
  </head>

  <body>
    <script src="./proxy-reactive.js"></script>
    <script>
      let obj = reactive({ a: 10, b: 20 });
      let timesA = ref(0);
      let sum = 0;
      effect(() => {
        timesA.value = obj.a * 10;
      });
      sum = computed(()=>{
        return timesA.value + obj.b;
      })
      console.log(timesA); // 100
      obj.a = 100;  // obj.a更新
      console.log(obj.a); // 多次使用obj.a的getter(之前在effect里面用过)，只会收集一次依赖
      console.log(timesA.value); // 1000
      console.log(sum.value); // 期望 1020
    </script>
  </body>
</html>
